<template>
  <div class="turnover_progress_status">
    <span class="block_label_color mad_label font_block"
          :class="stateColor">{{data.turnoverProcessStatusLabel}}</span>
  </div>
</template>

<script>
export default {
  name: 'TurnoverProgressStatus',
  props: {
    data: Object
  },
  computed: {
    // 根据周转进度状态返回相应class
    stateColor() {
      switch (this.data.turnoverProcessStatusValue) {
        case 'ToBeAssigned':
          // 待派工
          return 'turnover_progress_wait_send'
        case 'ToBeIssued':
          // 待下发
          return 'turnover_progress_send'
        case 'ToBeStarted':
          // 待开工
          return 'turnover_progress_wait_start'
        case 'Producing':
          // 生产中
          return 'turnover_progress_wait_producing'
        case 'Finished':
          // 已完工
          return 'turnover_progress_end'
        case 'InTechProc':
          // 待工艺编制
          return 'turnover_progress_technology'
        default:
          return ''
      }
    }
  }
}
</script>

<style lang="less">
  // 待派工
  @turnoverProgressWaitSend: #ffef71;
  // 待下发
  @turnoverProgressSend: #ffc7c7;
  // 待开工
  @turnoverProgressWaitStart: #99e1ff;
  // 生产中
  @turnoverProgressProducing: #a0e7b1;
  // 已完工
  @turnoverProgressEnd: #cbd2d9;
  // 待工艺编制
  @turnoverProgressTechnology: #ffef71;
  .turnover_progress_status{
    .block_label_color{
      // 待派工
      &.turnover_progress_wait_send{
        background-color: @turnoverProgressWaitSend;
      }
      &.turnover_progress_send{
        background-color: @turnoverProgressSend;
      }
      &.turnover_progress_wait_start{
        background-color: @turnoverProgressWaitStart;
      }
      &.turnover_progress_wait_producing{
        background-color: @turnoverProgressProducing;
      }
      &.turnover_progress_end{
        background-color: @turnoverProgressEnd;
      }
      &.turnover_progress_technology{
        background-color: @turnoverProgressTechnology;
      }
    }
  }
</style>
